<template>
  <Page>
    <p-header title="Login"/>
    <StackLayout class="container">
      <Image class="logo" src="~/images/logo.png"/>
      <GridLayout columns="auto,*,auto" class="input-line">
        <Image class="left-icon" col='0' src="~/images/email.png"/>
        <TextField v-model="email" hint="Email" col='1' keyboardType="email"
          autocorrect="false" autocapitalizationType="none"></TextField>
        <Button v-if="!isLogin"  col="2" class="send-btn" text="Send" :isEnabled="email.length > 0 && email.indexOf('@') > 0 && !this.isSending" @tap="sendCode" />
        <Image v-if="isLogin && email.length > 4" @tap="clearEmail()" class="right-icon" col='2' src="~/images/delete.png"/>
      </GridLayout>
      <GridLayout v-if="!isLogin" columns="auto,*,auto" class="input-line">
          <Image class="left-icon" col='0' src="~/images/code.png"/>
          <TextField v-model="emailCode" hint="Code sent to your email"  col='1' keyboardType="number"
            autocorrect="false" autocapitalizationType="none"></TextField>
      </GridLayout>
      <GridLayout columns="auto,*,auto" class="input-line">
          <Image class="left-icon" col='0' src="~/images/key.png"/>
          <TextField v-model="password" hint="Password" :secure="isSecure" col='1' keyboardType="number"
            autocorrect="false" autocapitalizationType="none"></TextField>
          <Image @tap="onHideTap()" v-if="isLogin" class="right-icon" col='2' :src="isSecure ? '~/images/unhide.png': '~/images/hide.png'"/>
      </GridLayout>
      <GridLayout v-if="!isLogin" columns="auto,*,auto" class="input-line">
          <Image class="left-icon" col='0' src="~/images/key.png"/>
          <TextField v-model="confirmPassword" hint="Confirm Password" secure="true" col='1' keyboardType="number"
            autocorrect="false" autocapitalizationType="none" returnKeyType="done"></TextField>
      </GridLayout>
      <!-- <GridLayout class="btn-container">
        <Button :isEnabled="loginButtonEnabled" class="btn" :text="isLogin ? 'Login' : 'Sign Up'" @tap="onLoginPress()"/>
        <ActivityIndicator class="indicator" :busy="isLoading" />
      </GridLayout> -->
      <p-button class="btn-container" 
        :pEnabled="loginButtonEnabled" 
        :text="isLogin ? 'Login' : 'Sign Up'" 
        :onTap="onLoginPress"
        :busy="isLoading"/>
      <DockLayout stretchLastChild="false" class="bottom-btns">
        <button @tap="onSignUpTap()" dock="left"  class="sign-up" :text="isLogin ? 'Sign Up' : 'Login'" verticalAlignment="center"></button>
        <button @tap="onForgotPasswordTap()" dock="right" class="sign-up" text="Forgot Password" verticalAlignment="center"></button>
      </DockLayout>
    </StackLayout>
  </Page>
</template>

<script>
import {post, get} from '~/business/NetRequest'
import Header from '../common/Header'
import ForgotPassword from './ForgotPassword'
import Button from '../common/PButton'
import {dataBus} from '~/business/DataBus'
require( "nativescript-localstorage" )

export default {
  components: {
    'p-header': Header,
    'p-button': Button
  },
  data() {
    return {
      isLogin: true,
      password: '',
      confirmPassword: '',
      email: '',
      isSecure: true,
      isLoading: false,
      emailCode: '',
      isSending: false,
    }
  },
  computed: {
    loginButtonEnabled() {
      return this.isLogin? (!this.isLoading && this.email.length > 0 && this.password.length > 0) : 
        (!this.isLoading && this.email.length > 0 && this.password.length > 0 && this.confirmPassword.length > 0)
    }
  },
  methods: {
    onSignUpTap() {
      this.isLogin = !this.isLogin;
      if (!this.isLogin) {
        this.isSecure = true;
      }
    },
    clearEmail() {
      this.email = '';
    },
    onHideTap() {
      this.isSecure = !this.isSecure;
    },
    onLoginPress() {
      console.log('login press');
      if (!this.email || !this.password) {
        return;
      }
      if (!this.isLogin && this.password != this.confirmPassword) {
        alert('Two passwords are not the same');
        return;
      }
      this.isLoading = true;
      let that = this;
      post({
        api: this.isLogin? 'account/login' : 'account/register',
        data: {
          username: this.email,
          password: this.password,
          code: this.emailCode,
        },
        success: (data) => {
          localStorage.setItem('token', data.token)
          localStorage.setItem('email', that.email)
          dataBus.loginBack && dataBus.loginBack()
          dataBus.loginBack = null
          that.$navigateBack()
        },
        error: (code, msg) => {
          that.isLoading = false;
          alert({
            title: 'Error',
            message: msg,
            okButtonText: "OK"
          });
        }
      })
    },
    onForgotPasswordTap() {
      this.$navigateTo(ForgotPassword)
    },
    sendCode() {
      if (this.isSending) {
        return
      }
      const self = this
      this.isSending = true
      get({
        api: `account/register/code?userName=${this.email}`,
        error: (code, msg) => {
          self.isSending = false
          alert(msg)
        },
        success:() => {
          self.isSending = false
          alert({
            title: 'Send Success',
            message: 'Pls check mail box',
            okButtonText: "OK"
          })
        }
      })
    }
  },
   beforeDestroy() {
    dataBus.loginBack = null
  },
}
</script>
<style scoped>
.container{background-color:#15253c;width:100%;padding:73 38}
.input-line{width:100%}
.input-line .left-icon{width:22;height:22;margin-right:22}
.input-line TextField{color:#ffffff;font-family:'PingFangSC-Regular';placeholder-color:#687889}
.input-line .right-icon{width:18;height:18}
.input-line{height:50;border-bottom-color:#264664;border-bottom-width:1px}
.btn-container{width: 100%; height: 50;margin-top:30;}
/* .btn{width:100%;height:100%;background:linear-gradient(to right, #01c4e7, #0081d8);color:white} */
/* .btn:disabled{background: #5d80a4}
.btn:active{background: #245b70} */
.header{width:100%;height:50;background-color:#203956}
.back{left:15;top:12.5;width:25;height:25}
.tab-container{left:0;top:0;width:100%;height:100%}
.tab-left{margin-right:50}
.logo{margin-bottom:30}
.sign-up{color:rgba(255,255,255,0.5);border-bottom-width:1px;border-bottom-color:rgba(255,255,255,0.5); padding:0; height: 30;}
.bottom-btns{margin-top:10}
.send-btn {
    width: 62;
    height: 24;
    background:linear-gradient(to right, #01c4e7, #0081d8);
    color:white; 
    border-radius: 4;
    font-size: 12;
    padding: 0;
  }
.send-btn:disabled {
  background: #5d80a4;
}
</style>
